<template>
  <div class="flowCanvas">
    <div class="container" ref="container"></div>
    <!-- 节点面板 -->
    <CustomNodePanel v-if="lf" :lf="lf"></CustomNodePanel>
    <!-- 数据面板 -->
    <BpmnDataPanel v-if="lf" :lf="lf"></BpmnDataPanel>
    <!-- 弹窗编辑 -->
    <el-drawer title="编辑节点" :modal="false" v-model="drawer" :direction="'rtl'">
      <div>节点ID: {{ currentNode.data.id }}</div>
      <div>节点名称: {{ currentNode.data.text ? currentNode.data.text.value : '没有配置节点text值' }}</div>
      <div>
        <el-select v-model="roleIdArr" placeholder="请选择审批角色" clearable filterable>
          <el-option v-for="item in roleList" :key="item.RoleId" :label="item.RoleName"
            :value="item.RoleId + '-' + item.RoleName">
          </el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" size="default" @click="saveApproverInfo">保存</el-button>

      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/style/index.css";
import {
  BpmnElement,
  BpmnXmlAdapter,
  Snapshot,
  Control,
  Menu,
  SelectionSelect,
} from "@logicflow/extension";
import "@logicflow/extension/lib/style/index.css";
import CustomNodePanel from "./components/CustomNodePanel.vue";
import BpmnDataPanel from "./components/BpnmDataPanel.vue";
import axios from "axios"
import { baseURL_dev } from '@/config/baseURL'
const baseURL = baseURL_dev
axios.defaults.baseURL = baseURL_dev;


export default {
  name: "logicflowCustom",
  data() {
    return {
      lf: null,
      drawer: false,
      currentNode: null,
      roleIdArr: '',
      //角色列表
      roleList: [],
    };

  },
  components: { CustomNodePanel, BpmnDataPanel },

  mounted() {
    this.getRoleList();

    LogicFlow.use(BpmnElement);
    LogicFlow.use(BpmnXmlAdapter);
    LogicFlow.use(Snapshot);
    LogicFlow.use(Control);
    LogicFlow.use(Menu);
    LogicFlow.use(SelectionSelect);
    //初始化
    this.lf = new LogicFlow({
      container: this.$refs.container,
      grid: {
        size: 10,
        visible: true,
        type: "mesh",
        config: {
          color: "#ababab",
          thickness: 1,
        },
      },
    });
    this.lf.render();
    //绑定事件
    const { eventCenter } = this.lf.graphModel;
    this.bindEvent(eventCenter);
  },

  methods: {
    bindEvent(eventCenter) {
      eventCenter.on("node:click", (args) => {
        console.log("节点单击", args);
        this.drawer = true;
        this.currentNode = args;
      });
    },
    //获取角色列表
    getRoleList() {
      axios.get("Role/GetAllRoleList").then(res => {
        this.roleList = res.data.Data;
        console.log(this.roleList);
      })
    },

    //保存审批角色
    saveApproverInfo() {
      let array = this.roleIdArr.split('-');
      this.lf.setProperties(this.currentNode.data.id, { roleId: array[0], roleName: array[1] });
      this.drawer = false;
    }
  },
};
</script>

<style>
.flowCanvas {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0px;
  display: flex;
}

.flowCanvas .container {
  display: flex;
  flex-grow: 1;
  /*铺满剩余空间*/
  border: 3px solid #ababab;
  overflow: hidden;
}
</style>